import React from 'react';
import { Carousel } from 'antd';
import ROUTES from '@utils/routes'
import { Link } from 'react-router-dom'

import Breadcrumb from '@components/Breadcrumb/index'
import SourceData from '@utils/sourceData.js'
import b1 from '@assets/banner/neibanner1.jpg'
import b2 from '@assets/banner/neibanner2.jpg'
import b3 from '@assets/banner/neibanner3.jpg'


import gki1 from '@assets/home/gki2.png'
import gki2 from '@assets/home/gki3.png'
import gki3 from '@assets/home/gki4.png'
import gki4 from '@assets/home/gki5.png'

import gk1 from '@assets/home/gk2.jpg'
import gk2 from '@assets/home/gk3.jpg'
import gk3 from '@assets/home/gk4.jpg'
import gk4 from '@assets/home/gk5.jpg'

import './index.less'
import News from '@components/News/index'
import List from '@components/List'
const { news, researchHighlights,  } = SourceData

class Index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            banner: [
                {
                    url: '/news/detail?id=0001',
                    img: b1
                }, {
                    url: '/news/detail?id=0002',
                    img: b2
                }, {
                    url: '/news/detail?id=0003',
                    img: b3
                }
            ],
            list: [
                {
                    url: ROUTES.ABOUT_US.OVERVIEW.URL,
                    bgImg: gk1,
                    logoImg: gki1,
                    title: '实验室简介'
                },{
                    url: ROUTES.ABOUT_US.LEADERSHIP.URL,
                    bgImg: gk2,
                    logoImg: gki2,
                    title: '实验室领导'
                },{
                    url: ROUTES.ABOUT_US.SCIENTIFIC_ADVISORY_BOARD.URL,
                    bgImg: gk3,
                    logoImg: gki3,
                    title: '学术委员会'
                },{
                    url: ROUTES.ABOUT_US.LEADING_SCIENTISTS.URL,
                    bgImg: gk4,
                    logoImg: gki4,
                    title: '领衔科学家'
                }
            ],
        }
    }

    render() {
        document.title = '首页'
        return (
            <div id="home">
                <Breadcrumb arr={['首页']}/>
                <Carousel autoplay waitForAnimate style={{ textAlign: 'center'}}>
                    {
                        this.state.banner.map((item, index) => (
                            <div key={index}>
                                <Link to={item.url}>
                                    <img src={item.img}/>
                                </Link>
                            </div>
                        ))
                    }
                </Carousel>
                <ul className='about-us'>
                {
                    this.state.list.map((item, index) => (
                        <li key={index}>
                            <Link to={item.url} style={{ background: `url(${item.logoImg}) no-repeat left center`, backgroundSize: '30px'}}>
                                {item.title}
                            </Link>
                        </li>
                    ))
                }
                </ul>
                <div className='news'>
                    <div className='title'>
                        <span>新闻中心</span>
                        <Link to={ROUTES.NEWS.INDEX.URL}>
                            更多&gt;&gt;
                        </Link>
                    </div>
                    <div style={{paddingTop: '24px'}}>
                        <News data={news.slice(0, 1)}/>
                    </div>
                </div>
                <div className='research-highlights'>
                    <div className='title'>
                        <span>科学研究</span>
                        <Link to={ROUTES.SCIENTIFIC_RESEARCH.RESEARCH_HIGHLIGHTS.URL}>
                            更多&gt;&gt;
                        </Link>
                    </div>
                    <div style={{paddingTop: '24px'}}>
                        <List data={researchHighlights.slice(0, 2)} url={ROUTES.SCIENTIFIC_RESEARCH.RESEARCH_HIGHLIGHTS.DETAIL.URL}/>
                    </div>
                </div>
            </div>
        )
    }
}

export default Index;